<script setup>
import 'vue3-video-play/dist/style.css'
import {reactive, onMounted, watch, ref, onUnmounted, onUpdated} from "vue";
import {videoPlay} from "vue3-video-play/lib";
import VideoApi from "@/api/VideoApi.js";
import {useRouter,useRoute} from "vue-router";
import {secondFormat} from "@/utils/utils.js";
import VideoCard from "@/components/VideoCard.vue";
import Comment from "@/view/video/Comment.vue";
import {ElMessage} from "element-plus"; // 引入css
import {useLoginStore} from "@/store/index.js";
import HistoryApi from "@/api/HistoryApi.js";
const {userIsLogin} = useLoginStore()
const route = useRoute()
const router = useRouter()
const commentRef = ref()
const options = reactive({
  width: "100%", //播放器宽度
  height: "520px", //播放器高度
  color: "#409eff", //主题色
  title: "南方菇凉", //视频名称
  currentTime:0,
  src: ""})
const state = reactive({
  videoInfo:{category:{}},
  rangeVideoList:[],
  seqList:[],
  recordTime:0
})
const getVideoInfo = (videoCode)=>{
  VideoApi.getVideoInfo(videoCode).then(res=>{
    state.videoInfo = res.data
    state.videoInfo.category = res.data.category
    options.src = state.videoInfo.sourceSrc
    options.title = state.videoInfo.videoName
    if (state.videoInfo.isMultiple){
      getSeqList()
    }
  })
}
const getSeqList = () => {
  VideoApi.getSeqList(state.videoInfo.videoId).then(res=>{
    state.seqList = res.data
  })
}
const getRangeVideoList  =()=>{
  VideoApi.getRangeVideo(5).then(res=>{
    state.rangeVideoList = res.data
  })
}
onMounted(()=>{
  getVideoInfo(route.params.videoCode)
  if (route.query.time){
    options.currentTime = route.query.time
  }
  getRangeVideoList()

})
const changeSeq=(item)=>{
  if (item.videoCode !==  state.videoInfo.videoCode){
    router.push(`/play/${item.videoCode}`)
    getVideoInfo(item.videoCode)
    getRangeVideoList()
    commentRef.value.getCommentList(false,item.videoCode,true)
  }
}
onUnmounted(()=>{
  recordHistory()
})

onUpdated(()=>{
recordHistory()
})

const recordHistory=()=>{
  if (userIsLogin()){
    const dto = {
      videoCode:state.videoInfo.videoCode,
      time:state.recordTime
    }
    HistoryApi.recordHistory(dto).then(res=>{

    })
  }
}
const playerRef = ref()

const timeUpdate = (e)=>{
  state.recordTime=parseInt(e.target.currentTime)

}


</script>
<template>
<main class="main">
  <el-row>
    <el-col :span="18" style="border-bottom-left-radius: 8px;overflow: hidden">
      <p class="title-name">{{state.videoInfo.videoName}}</p>
      <videoPlay v-bind="options"  ref="playerRef" @timeupdate="timeUpdate"/>
      <div class="video-info"  style="width: 75%">
        <span class="name">{{state.videoInfo.videoName}}</span>
        <span class="score">{{state.videoInfo.rate}}</span>
        <p class="type">{{state.videoInfo.category.categoryName}}</p>
        <div class="description">
          {{state.videoInfo.videoDesc}}
        </div>
        <p class="tag-box" v-if="state.videoInfo.tagList&& state.videoInfo.tagList.length>0">
          <el-tag style="margin-right: 10px" effect="light" type="danger"
                  v-for="(tag,index) in state.videoInfo.tagList" :key="index">{{tag}}</el-tag>
        </p>
        <el-divider/>
      </div>
    </el-col>
    <el-col :span="6" class="play-list-box" style="border-bottom-right-radius: 8px;">
      <p class="header">
        <span style="font-size: 22px;font-weight: 600">播放列表</span>
      </p>
      <div class="video-list">
        <div class="list-item selected" style="width: 100%" v-if="!state.videoInfo.isMultiple">{{state.videoInfo.videoName}}</div>
        <div :class="item.seq===state.videoInfo.seq?'list-item selected':'list-item'"
             @click="changeSeq(item)"
             style="width: 100%" v-else v-for="item in state.seqList" :key="item.videoCode">第{{item.seq}}集</div>

      </div>
      <p class="header">
        <span style="font-size: 22px;font-weight: 600">猜你喜欢</span>
      </p>
      <ul class="recommend-box">
        <li class="video-item" v-for="video in state.rangeVideoList" :key="video.videoCode">
          <VideoCard :flex="'row'" :height="'80px'"  :video="video"/>
        </li>
      </ul>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="18">
      <Comment ref="commentRef" />
    </el-col>
  </el-row>

</main>
</template>



<style scoped lang="less">
.title-name{
  padding: 5px;
  font-size: 22px;
  font-weight: 600;
}
.main{
  width: 75%;
  margin: 0 auto;
}
.video-info{
  margin-top:10px;
  padding:10px 0;
  .name{
    font-size: 22px;
    font-weight: 600;
  }
  .score{
    color: #fdc1c8;
    font-size: 22px;
    font-weight: 600;
    margin-left: 10px;
  }
  .type{
    padding: 10px 0;
    color: #666666;
    font-size: 15px;
  }
  .description{
    font-size: 14px;
  }
  .tag-box{
    margin-top: 15px;
  }
}

.play-list-box{
  //background-color: #f8f8f8;
  .header{
    padding: 15px;
  }
  .video-list{
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    .list-item{
      border-radius: 8px;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666666;
      font-weight: 600;
      transition: color ease-in-out .4s;
      background-color: #f2f2f2;
      cursor: pointer;
    }
    .list-item:hover{
      color: #f9c9c9;
    }
    .selected{
      color: white;
      background-color: #f9c9c9;
    }
    .selected:hover{
      color: white;
    }
  }
  .recommend-box{
    //height: 40%;
    padding: 0 15px;
    //overflow-y: scroll;
  }
}
.video-item{
  margin-top: 10px;
}
.video-item:nth-child(1){
  margin-top: 0;
}
:deep(.el-divider--horizontal){
  margin-top: 10px;
}
</style>